<template>
  <div>
    <my-head title="会员等级" :go="true" ri="会员规则"></my-head> 
    
    <swiper :options="swiperOption" ref="mySwiper"  id="box">

    <swiper-slide><img src="@/assets/v0.png" alt="">普通会员V0</swiper-slide>
    <swiper-slide><img src="@/assets/v1.png" alt=""> 白银会员V1</swiper-slide>
    <swiper-slide><img src="@/assets/v2.png" alt=""> 黄金会员V2</swiper-slide>
    <swiper-slide><img src="@/assets/v3.png" alt=""> 铂金会员V3</swiper-slide>
    <swiper-slide><img src="@/assets/v4.png" alt="">钻石会员V4 </swiper-slide>
    <swiper-slide><img src="@/assets/v5.png" alt="">VIP会员V5 </swiper-slide>

    <!-- Optional controls -->
    <!-- <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
  </swiper>

      </div>
</template>

<script>
import Head from '@/components/Head'

export default {
  data(){
    return {
      swiperOption: {
        effect : 'coverflow',
        slidesPerView: 3.5,
        centeredSlides: true,
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 8,
          modifier: 8,
          slideShadows : false
        }
      }
    }
  },
  components:{
    myHead:Head
  }

}
</script>

<style scoped>
.swiper-slide{
  height: 50vw;
  width: 100%;
  padding: 10vw 0vw;
  margin-right: 0.5rem;
  box-sizing: border-box;
}
.swiper-slide img{
  width: 30vw;
  height: 30vw;
}
.swiper-slide {
  text-align: center
}
.swiper-slide-active img{
  transform: scale(1.4) !important;
}
#box im{
/* transform: translateX(2rem) */

  
}
</style>
